<script lang="ts" setup>
// import { LoginService } from "@/services/login.services";
import { ref } from "vue";
import { hope } from "@/tools/hope/@types/hope";

const phone = ref("");
const password = ref("");

function login(): void {
  // if (!phone.value) hope.message({ type: "error", content: "请先输入账号" });
  // else if (!password.value)
  //   hope.message({ type: "error", content: "请先输入密码" });
  // else
  //   LoginService.ins.login(phone.value, password.value).then(() => onClose());
}
/** 关闭 */
function onClose(): void {
  hope.destroyDiv("login");
}
</script>
<template>
  <div class="login flex-c">
    <div class="title flex"><span class="text flex">账号登录</span> <span class="close" @click="onClose">×</span></div>
    <input class="cell" type="text" placeholder="请输入账号" v-model="phone">
    <input class="cell" type="password" placeholder="请输入密码" v-model="password">
    <button class="cell btn" @click="login">登录</button>
  </div>
</template>
<style lang="scss" scoped>
$width: 480;
$height: 380;
.login {
  width: $width + px;
  height: $height + px;
  position: fixed;
  top: 40%;
  left: 50%;
  background: #ffffff;
  box-shadow: 0 0 50px #cacaca;
  border-radius: 10px;
  margin-top: -($height / 2 + px);
  margin-left: -($width / 2 + px);
  padding: 50px;
  justify-content: space-between;
}

.title {
  width: 100%;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 45px;
  justify-content: space-between;
  .text {
    &::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 22px;
      background: #f2994a;
      margin-right: 8px;
    }
  }

  .close {
    cursor: pointer;
    font-weight: 600;
    font-size: 25px;
  }
}
.cell {
  width: 100%;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 15px 20px;
  margin-bottom: 20px;
  border-radius: 7px;
}
.btn {
  background: #f2994a;
  border-radius: 4px;
  border-color: #fff;
  color: #fff;
  height: 52px;
  cursor: pointer;
  margin-bottom: 0;
  margin-top: 25px;
}
</style>
